<%@page import="java.net.URLEncoder"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'baidu.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<style type="text/css">
		#baidu{
			border:1px solid #ccc;
			height:300px;
			width:350px;
			margin:0px auto;
			text-align: center;
		}
		#txtBaidu{
			width:200px;
		}
		#suggest{
			border:0px solid #000;			
			width:200px;
			margin-left:35px;
		}
		.d1{
			text-align: left;
			font-size: 14px;
			height: 20px;
		}
	</style>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
				$("#txtBaidu").keyup(function(e) {
                      $.post("baidu", 
					              {keyword:$(this).val()},
								  function(data,status){
						  				alert(data+"---"+status);
										var words = data.split(",");//分割的数组
						  				var keywords = "";
										if(words.length>0){
											for(var i=0; i<words.length; i++){
												keywords +="<div class='d1' onclick='setVal(this.innerHTML)' onmouseover='os(this)' onmouseout='ou(this)'>";
												keywords+= words[i]+"</div>";
											}
										}
										//把内容显示在suggest的div中
										$("#suggest").html(keywords);
						          });
                });//keyup事件结束
			});//document.ready结束
	
		//鼠标悬停
		function os(obj){
			obj.style.backgroundColor="#ccc";
		}
		//鼠标移出
		function ou(obj){
			obj.style.backgroundColor="#fff";
		}
		//鼠标单击
		function setVal(val){
			$("#txtBaidu").val( val );
			$("#suggest").css("display","none");
		}
	
	</script>
	
	
  </head>
  
  <body>
    <!-- 超链接传中文参数 -->
    <%
        //编码 
    	String s  =URLEncoder.encode("百度", "utf-8");
    %>
    <a href="baidu?keyword=<%=s%>">百度</a>
    
    <div id="baidu">
    	<input type="text" id="txtBaidu">
    	<input type="button" value="百度一下">
    	<div id="suggest"   ></div>
    </div>
    
    
  </body>
</html>
